@charset "utf-8";html, body {padding: 0; margin: 0; background: #fff;}
*{margin: 0; padding: 0; font-family: Arial, Helvetica, Verdana, 'Microsoft YaHei'; border: 0; outline: medium; text-shadow: none; text-decoration: none;}
html {scroll-behavior: smooth;}
body {color: #333; font-size: 14px; line-height: 1.5; position: relative; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); overflow-x: hidden;overflow-x: hidden;}
input {vertical-align: middle;outline: none;border: none;background: none;}
textarea {resize: none;outline: none;border: none;background: none;}
h1, h2, h3, h4, h5, h6 {font-weight: normal; font-size: 14px;margin: 0;padding: 0;}
hr {border-width: 1px; border-style: inset;}
ul,li {list-style: none;}
p {margin: 0;}
a, a:link, a:active, a:visited, a:hover {text-decoration: none;}
i {display: block;}
i, em {font-style: normal;}
html{height: 100%;}
html, body {width: 100%; min-height: 100%;}
.fr{float: right;}
.fl{float: left;}
.clear{clear: both;}

/* head */
.head{width: 100%;position: fixed;top: 0;left: 0;height: 90px;z-index: 11;
  background-image: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,0.6));
}
.headleft,.headright{float: left;width: 100%;height: 90px;text-align: center;}
.headleft .logo{height: 100%;}
.headleft .logo a,.headleft .logo a h1{display: inline-block;width: 100%;margin: 0;height: 100%;}
.headleft .logo a h1 img{display: inline-block;max-width: 80%;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);max-height: 70%;}
.headright{position: relative;}
.headright .nav{width: calc(100% - 310px);float: left;}
.headright .nav .navBox ul{margin: 0;}
.headright .nav .navBox ul .child{display: block;float: left;width: 14%;text-align: center;line-height: 50px;font-size: 16px;transition: all 0.3s;position: relative;margin: 20px 0;}
.headright .nav .navBox ul .child>a{color: #fff;}
.headright .nav .navBox ul .child>a p{position: relative;}
.headright .nav .navBox ul .child>a p::before{content: '';position: absolute;display: inline-block;z-index: -1;width: 20%;height: calc(100%);left: 50%;top: 0;transform: translateX(-50%) skewX(-10deg);border-bottom-right-radius: 15px;background-color: #006FBD;
  /* background-image: linear-gradient(to top, rgba(134,118,255,1), rgba(63,146,255,1)); */
  opacity: 0;transition: all 0.3s;overflow: hidden;}
.headright .nav .navBox ul .child>a p.active::before{opacity: 1;}
.headright .nav .navBox ul .child:hover>a p::before{opacity: 1;width: 100%;border-bottom-right-radius: 0px;transform: translateX(-50%) skewX(0deg);}
.headright .nav .navBox ul .child .childContent{padding: 15px 5px;transform-origin: top;transition: all 0.3s;position: absolute;width: auto;white-space: nowrap;left: 50%;transform:rotateX(90deg) translateX(calc(-50%));min-width: 100%;}
.headright .nav .navBox ul .child .childContent li{width: 100%;line-height: 50px;}
.headright .nav .navBox ul .child .childContent li a{color: #fff;display: inline-block;width: 100%;height: 100%;}
.headright .nav .navBox ul .child .childContent li:hover{background-color: rgba(0,0,0,0.1);}

.headright .nav .navBox ul .child:hover .childContent{transform: rotateX(0deg) translateX(calc(-50%));background-color: #006FBD;
  /* background-image: linear-gradient(to top, rgba(134,118,255,1), rgba(63,146,255,1)); */
}

.headright .search{height: 44px;font-size: 15px;position: absolute;right: 0px;top: 50%;transform: translateY(-50%);cursor: pointer;width: 280px;}
.headright .search form{display: block;border: 1px solid rgba(255,255,255,0.8);border-bottom-right-radius: 15px;width: 100%;height: 100%;transform: skewX(-10deg);position: relative;max-width: 180px;}
.headright .search form input{width: 75%;height: 35px;position: absolute;left: 5px;top: 50%;transform: translateY(-50%);color: #fff;font-size: 14px;}
.headright .search form input::placeholder{color: #fff;}
.headright .search form button{background: none;position: absolute;right: 5px;top: 50%;transform: translateY(-50%) skewX(10deg);width: 25%;color: #fff;}

/* wapnav */
.menu-btn {position: absolute; z-index: 3; display: flex; justify-content: center; align-items: center; width: 105px; height: 43px; border-radius: 22px; cursor: pointer; transition: 0.4s 0.2s; background: rgba(0, 0, 0, 0.4); top: 50%; right: 3%; transform: translateY(-50%);}
.menu-btn p {margin-right: 10px; color: #fff; font-size: 15px; text-transform: uppercase; transition: 0.4s 0.2s;}
.menubtn {position: relative; z-index: 20; float: right; cursor: pointer; transition: 0.4s; cursor: pointer;}
.menubtn span {display: block; width: 18px; height: 2px; background: #fff; position: relative; vertical-align: middle; -webkit-transition-duration: .3s,.3s; -moz-transition-duration: .3s,.3s; -ms-transition-duration: .3s,.3s; -o-transition-duration: .3s,.3s; transition-duration: .3s,.3s; -webkit-transition-delay: .3s,0s; -moz-transition-delay: .3s,0s; -ms-transition-delay: .3s,0s; -o-transition-delay: .3s,0s; transition-delay: .3s,0s;}
.menubtn span:after, .menubtn span:before {content: ""; position: absolute; display: inline-block; width: 100%; height: 2px; left: 0; background-color: #fff; -webkit-transition-duration: .3s,.3s; -moz-transition-duration: .3s,.3s; -ms-transition-duration: .3s,.3s; -o-transition-duration: .3s,.3s; transition-duration: .3s,.3s; -webkit-transition-delay: .3s,0s; -moz-transition-delay: .3s,0s; -ms-transition-delay: .3s,0s; -o-transition-delay: .3s,0s; transition-delay: .3s,0s;}
.menubtn span:before {top: -6px; -webkit-transition-property: top,transform; -moz-transition-property: top,transform; -ms-transition-property: top,transform; -o-transition-property: top,transform; transition-property: top,transform;}
.menubtn span:after {bottom: -6px; -webkit-transition-property: bottom,transform; -moz-transition-property: bottom,transform; -ms-transition-property: bottom,transform; -o-transition-property: bottom,transform; transition-property: bottom,transform;}
.menubtn.active span {background-color: transparent; -webkit-transition-delay: 0s,0s; -moz-transition-delay: 0s,0s; -ms-transition-delay: 0s,0s; -o-transition-delay: 0s,0s; transition-delay: 0s,0s;}
.menubtn.active span:after, .menubtn.active span:before {-webkit-transition-delay: 0s,.3s; -moz-transition-delay: 0s,.3s; -ms-transition-delay: 0s,.3s; -o-transition-delay: 0s,.3s; transition-delay: 0s,.3s;}
.menubtn.active span:before {top: 0px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}
.menubtn.active span:after, .menubtn.active span:before {-webkit-transition-delay: 0s,.3s; -moz-transition-delay: 0s,.3s; -ms-transition-delay: 0s,.3s; -o-transition-delay: 0s,.3s; transition-delay: 0s,.3s;}
.menubtn.active span:after {bottom: 0px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}
.menu-flex.show {visibility: visible; pointer-events: visible;}
.menu-flex {position: fixed; left: 0; top: 0; width: 100%; height: 100%; visibility: hidden; pointer-events: none; transition: 0.88s;}
.menu-flex.show .menu-bg {opacity: 1; visibility: visible; transition: 0.88s 0s;}
.menu-bg {position: absolute; left: 0; top: 0; background: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: 0.88s 0.3s; z-index: 9;}
.menu-flex.show .menu-right {right: 0;}
.menu-right {position: absolute; right: -330px; top: 0; width: 60%; max-width: 330px; height: 100%; background: #fff; transition: 0.8s cubic-bezier(0.77, 0, 0.175, 1); z-index: 10;}
.menu-list {padding-top: 100px; margin: 0 30px;}
.menu-list > li {position: relative; z-index: 3; border-bottom: 1px solid #ebebeb;}
.menu-list > li > a {display: block; position: relative; z-index: 2; padding-left: 42px; color: #333333; font-size: 16px; height: 59px; line-height: 59px;}
.menu-list > li > a:before {position: absolute; left: 0; bottom: 0; content: ""; width: 100%; height: 0; background: #6ef944; transition: 0.38s; z-index: -1;}

.area{width: 100%;padding: 0 15px;}
.area h2{font-size: 54px;position: relative;padding-bottom: 3%;color: #333;display: grid;}
.area h2 span{font-size: 22px;color: #333;font-weight: normal;text-transform:capitalize;display: inline-block;width: 100%;}
.n-area{width: 100%;max-width: 1680px;margin: 0 auto;overflow: hidden;}
.more{display: inline-block;border-top-left-radius: 15px;border-bottom-right-radius: 15px;color: #fff;border: 1px solid #fff;font-size: 18px;width: 50%;max-width: 200px;text-align: center;transform: skewX(-5deg) translate(-5px,-5px);line-height: 55px;transition: all 0.3s;position: relative;}
.more::after{content: '';display: inline-block;width: 20px;height: calc(100% + 2px);position: absolute;right: -2px;top: calc(25% - 5px);background-color: #FFAC5F;transition: all 0.3s;z-index: -1;border-bottom-right-radius: 15px;transform: translate(5px,5px);}
.more:hover{transform: skewX(-5deg) translate(0,0);color: #fff;}
.more:hover::after{transform: translate(0,0);right: -1px;top: -1px;}
 
.m-nbanner{display: none;}
.m-nbanner img{width: 100%;min-height: 200px;object-fit: cover;}

/* foot */
.footer{background-color: #222;color: #fff;padding: 35px 15px;}
.footer .foot-l{width: 40%;float: left;}
.footer .foot-r{width: 60%;float: left;}
.footer .foot-l img{width: 80%;max-width: 450px;}
.footer .foot-l h3{font-size: 36px;font-style: italic;font-weight: bold;display: block;width: 100%;padding: 25px 0 20px;}
.footer .foot-l p{color: rgba(255,255,255,0.6);font-size: 16px;display: block;width: 100%;line-height: 30px;padding: 1% 0;}
.footer .foot-l p:last-child{margin-top: 5%;}
.footer .foot-l a{color: rgba(255,255,255,0.6);}

.footer .foot-r .f-nav{width: 100%;}
.footer .foot-r .f-nav a{width: 14%;text-align: left;color: #fff;line-height: 30px;display: block;float: left;font-size: 18px;padding: 3% 0;margin-right: 0.333333%;}
.footer .foot-r .f-nav a:nth-last-child(2){margin-right: 0;}
.footer .foot-r .f-form{width: 100%;}
.footer .foot-r .f-form form{width: 100%;}
.footer .foot-r .f-form form .f-info{width: calc(100% - 60px);float: left;}
.footer .foot-r .f-form form .form-input{width: calc(50%);float: left;padding-right: 5px;}
.footer .foot-r .f-form form .form-tr{width: calc(50%);float: left;padding-left: 5px;}
.footer .foot-r .f-form form input{height: 70px;width: 100%;margin-bottom: 10px;border: 1px solid rgba(255,255,255,0.4);float: left;}
.footer .foot-r .f-form form textarea{height: 150px;margin-bottom: 10px;width: 100%;border: 1px solid rgba(255,255,255,0.4);line-height: 70px;float: left;}
.footer .foot-r .f-form form .form-code{width: 50%;float: left;padding-left: 5px;}
.footer .foot-r .f-form form .form-code input{width: calc(50%);}
.footer .foot-r .f-form form .form-code .verify{width: 50%;float: left;height: 70px;}
.footer .foot-r .f-form form .form-code .verify img{width: 100%;height: 100%;}
.footer .foot-r .f-form form .form-bt{width: 50px;height: 230px;margin-left: 10px;float: left;background-color: #D8D8D8;text-align: center;line-height: 230px;font-size: 18px;font-weight: bold;}
.footer .foot-r .f-form form .form-bt a{color: #333;}



@media screen and (min-width: 0px) and (max-width:1400px){
  .headright .nav{width: calc(100% - 270px);}
  .headright .nav .navBox ul .child{font-size: 15px;}
  .area h2{font-size: 38px;}
  .more{font-size: 15px;line-height: 50px;}

  .footer .foot-l p{font-size: 15px;}
  .footer .foot-r .f-nav a{font-size: 16px;}
}
@media screen and (min-width: 0px) and (max-width:1200px){
  .area h2{font-size: 30px;}

}
@media screen and (min-width: 0px) and (max-width:992px){
  .head,.headleft,.headright{height: 65px!important;}
  .product .proli a .pro-tit p{font-size: 14px;}
  .about .tit p{font-size: 14px;}
  .area h2 span{font-size: 18px;}

  .footer .foot-l,.footer .foot-r{width: 100%;}
  .footer .foot-l p:last-child{margin-top: 0;}
  .footer .foot-r .f-nav a{text-align: center;}

}
@media screen and (min-width: 0px) and (max-width:768px){
  .news ul li:first-child a img{height: 218px;}
  .more{line-height: 39px;height: 39px;font-size: 14px;}
  .footer{padding-bottom: 0;}
  
  .col-xs-6:nth-child(2n-1){padding-right: 7.5px;}
  .col-xs-6:nth-child(2n){padding-left: 7.5px;}
}
@media screen and (min-width: 0px) and (max-width:750px){
  .nbanner{display: none!important;}
  .m-nbanner{display: block!important;}
}
@media screen and (min-width: 0px) and (max-width:640px){
  .footer .foot-r .f-nav a{margin-right: 0;width: 25%;}
}
@media screen and (min-width: 0px) and (max-width:440px){
  .area h2{font-size: 26px;}
  .footer .foot-l p{font-size: 14px;}
  .footer .foot-r .f-nav a{font-size: 15px;}
  .footer .foot-r .f-form form .form-input{width: 100%;padding-right: 0;}
  .footer .foot-r .f-form form .form-tr{width: 100%;padding-left: 0;}
  .footer .foot-r .f-form form .form-code{width: 100%;padding-left: 0;}
  .footer .foot-r .f-form form .f-info{width: 100%;}
  .footer .foot-r .f-form form input{height: 50px;}
  .footer .foot-r .f-form form textarea{height: 110px;line-height: 50px;}
  .footer .foot-r .f-form form .form-code .verify{height: 50px;}
  .footer .foot-r .f-form form .form-bt{width: 100%;height: 50px;margin-left: 0;line-height: 50px;}
  .footer .foot-l h3{font-size: 28px;}
}
@media screen and (min-width: 0px) and (max-width:375px){
  .menu-list{padding-top: 80px;}
  .menu-list > li > a{font-size: 14px;padding-left: 30px;}
  .menu-btn{width: 90px;}
}
@media screen and (min-width: 0px) and (max-width:320px){
  .menu-list{padding-top: 60px;}
}